<div class="blazorise-codeblock">
<div class="html"><pre>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">LineChart</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>ref</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>lineChart</span><span class="quot">&quot;</span> <span class="htmlAttributeName">TItem</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">int</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Options</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>lineChartOptions</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">ChartDataLabels</span> <span class="htmlAttributeName">TItem</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">int</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Datasets</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>lineDataLabelsDatasets</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Options</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>lineDataLabelsOptions</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">LineChart</span><span class="htmlTagDelimiter">&gt;</span>
</pre></div>
<div class="csharp"><pre>
<span class="atSign">&#64;</span>code {
    <span class="keyword">private</span> LineChart&lt;<span class="keyword">int</span>&gt; lineChart;

    <span class="comment">// define regular chart options</span>
    LineChartOptions lineChartOptions = <span class="keyword">new</span>()
    {
        AspectRatio = 5d / 3d,
        Layout = <span class="keyword">new</span>()
        {
            Padding = <span class="keyword">new</span>()
            {
                Top = <span class="number">32</span>,
                Right = <span class="number">16</span>,
                Bottom = <span class="number">16</span>,
                Left = <span class="number">8</span>
            }
        },
        Elements = <span class="keyword">new</span>()
        {
            Line = <span class="keyword">new</span>()
            {
                Fill = <span class="keyword">false</span>,
                Tension = <span class="number">0</span>.<span class="number">4</span>,
            }
        },
        Scales = <span class="keyword">new</span>()
        {
            Y = <span class="keyword">new</span>()
            {
                Stacked = <span class="keyword">true</span>,
            }
        },
        Plugins = <span class="keyword">new</span>()
        {
            Legend = <span class="keyword">new</span>()
            {
                Display = <span class="keyword">false</span>
            }
        }
    };

    <span class="comment">// define specific dataset styles by targeting them with the DatasetIndex</span>
    List&lt;ChartDataLabelsDataset&gt; lineDataLabelsDatasets = <span class="keyword">new</span>()
    {
        <span class="keyword">new</span>()
        {
            DatasetIndex = <span class="number">0</span>,
            Options = <span class="keyword">new</span>()
            {
                BackgroundColor = BackgroundColors[<span class="number">0</span>],
                BorderColor = BorderColors[<span class="number">0</span>],
                Align = <span class="string">&quot;start&quot;</span>,
                Anchor = <span class="string">&quot;start&quot;</span>
            }
        },
        <span class="keyword">new</span>()
        {
            DatasetIndex = <span class="number">1</span>,
            Options = <span class="keyword">new</span> ()
            {
                BackgroundColor = BackgroundColors[<span class="number">1</span>],
                BorderColor = BorderColors[<span class="number">1</span>],
            }
        },
        <span class="keyword">new</span>()
        {
            DatasetIndex = <span class="number">2</span>,
            Options = <span class="keyword">new</span> ()
            {
                BackgroundColor = BackgroundColors[<span class="number">2</span>],
                BorderColor = BorderColors[<span class="number">2</span>],
                Align = <span class="string">&quot;end&quot;</span>,
                Anchor = <span class="string">&quot;end&quot;</span>
            }
        },
    };

    <span class="comment">// some shared options for all data-labels</span>
    ChartDataLabelsOptions lineDataLabelsOptions = <span class="keyword">new</span>()
    {
        BorderRadius = <span class="number">4</span>,
        Color = <span class="string">&quot;#ffffff&quot;</span>,
        Font = <span class="keyword">new</span>()
        {
            Weight = <span class="string">&quot;bold&quot;</span>
        },
        Formatter = ChartMathFormatter.Round,
        Padding = <span class="keyword">new</span>( <span class="number">6</span> )
    };

    <span class="keyword">private</span> <span class="keyword">static</span> <span class="keyword">string</span>[] Labels = <span class="keyword">new</span> <span class="keyword">string</span>[] { <span class="string">&quot;1&quot;</span>, <span class="string">&quot;2&quot;</span>, <span class="string">&quot;3&quot;</span>, <span class="string">&quot;4&quot;</span>, <span class="string">&quot;5&quot;</span>, <span class="string">&quot;6&quot;</span> };
    <span class="keyword">private</span> <span class="keyword">static</span> <span class="keyword">string</span>[] BackgroundColors = <span class="keyword">new</span> <span class="keyword">string</span>[] { <span class="string">&quot;#4bc0c0&quot;</span>, <span class="string">&quot;#36a2eb&quot;</span>, <span class="string">&quot;#ff3d88&quot;</span> };
    <span class="keyword">private</span> <span class="keyword">static</span> <span class="keyword">string</span>[] BorderColors = <span class="keyword">new</span> <span class="keyword">string</span>[] { <span class="string">&quot;#4bc0c0&quot;</span>, <span class="string">&quot;#36a2eb&quot;</span>, <span class="string">&quot;#ff3d88&quot;</span> };
    <span class="keyword">private</span> Random random = <span class="keyword">new</span>( DateTime.Now.Millisecond );

    <span class="keyword">protected</span> <span class="keyword">override</span> <span class="keyword">async</span> Task OnAfterRenderAsync( <span class="keyword">bool</span> firstRender )
    {
        <span class="keyword">if</span> ( firstRender )
        {
            <span class="keyword">await</span> HandleRedraw( lineChart, GetLineChartDataset );

            <span class="keyword">await</span> lineChart.Clear();

            <span class="keyword">await</span> lineChart.AddLabelsDatasetsAndUpdate( Labels,
                GetLineChartDataset( <span class="number">0</span> ),
                GetLineChartDataset( <span class="number">1</span> ),
                GetLineChartDataset( <span class="number">2</span> ) );
        }
    }

    <span class="keyword">private</span> <span class="keyword">async</span> Task HandleRedraw&lt;TDataSet, TItem, TOptions, TModel&gt;( Blazorise.Charts.BaseChart&lt;TDataSet, TItem, TOptions, TModel&gt; chart, Func&lt;<span class="keyword">int</span>, TDataSet&gt; getDataSet )
        <span class="keyword">where</span> TDataSet : ChartDataset&lt;TItem&gt;
        <span class="keyword">where</span> TOptions : ChartOptions
        <span class="keyword">where</span> TModel : ChartModel
    {
        <span class="keyword">await</span> chart.Clear();

        <span class="keyword">await</span> chart.AddLabelsDatasetsAndUpdate( Labels,
            getDataSet( <span class="number">0</span> ),
            getDataSet( <span class="number">1</span> ),
            getDataSet( <span class="number">2</span> ) );
    }

    <span class="keyword">private</span> LineChartDataset&lt;<span class="keyword">int</span>&gt; GetLineChartDataset( <span class="keyword">int</span> colorIndex )
    {
        <span class="keyword">return</span> <span class="keyword">new</span>()
        {
            Label = <span class="string">&quot;# of randoms&quot;</span>,
            Data = RandomizeData( <span class="number">2</span>, <span class="number">9</span> ),
            BackgroundColor = BackgroundColors[colorIndex],
            BorderColor = BorderColors[colorIndex],
        };
    }

    List&lt;<span class="keyword">int</span>&gt; RandomizeData( <span class="keyword">int</span> min, <span class="keyword">int</span> max )
    {
        <span class="keyword">return</span> Enumerable.Range( <span class="number">0</span>, Labels.Count() ).Select( x =&gt; random.Next( min, max ) ).ToList();
    }
}
</pre></div>
</div>
